<template>
  <div class="container">
    <div class="msg-list">
      <div
        class="msg-cell with-grey-bottom-border"
        v-for="(item, index) in list"
        :key="index"
      >
        <!-- <div class="icon"></div> -->
        <div class="text">
          <div class="left">
            <div class="earnings-name">
              {{ item.status === 1 ? "推荐奖励" : "购物奖励" }}
            </div>
            <div class="origin">来源：{{ item.nickname }}</div>
          </div>
          <div class="right">
            <div class="price">¥{{ item.bonus }}</div>
            <div class="time">{{ item.created_at }}</div>
          </div>
        </div>
      </div>
      <loadMore @loadMore="loadMore"></loadMore>
    </div>
  </div>
</template>

<script>
import loadMore from "@/components/load-more";
import { getCommissionMsg } from "@/api/msg-center";
export default {
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
      isAll: false
    };
  },
  methods: {
    loadMore() {
      if (this.loading || this.isAll || this.list.length === 0) return;
      this.loading = true;
      this.getCommissionMsg(++this.page);
    },
    getCommissionMsg(page) {
      getCommissionMsg({ page }).then(res => {
        if (res.status === 200) {
          this.list.push(...res.data.data);
          if (res.data.data.length === 0) {
            this.isAll = true;
            this.$dialog.toast({
              mes: "已经到最底了",
              timeout: 1500
            });
          }
        }
        this.$nextTick(() => {
          this.loading = false;
        });
      });
    }
  },
  created() {
    this.getCommissionMsg(1);
  },
  components: {
    loadMore
  }
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100%;
  height: auto;
  padding-bottom: 1rem;
  .msg-list {
    margin-top: 0.48rem;
    .msg-cell {
      background: #fff;
      height: 3rem;
      display: flex;
      padding: 0.72rem 3.2%;

      .icon {
        height: 1.6rem;
        width: 1.6rem;
        border-radius: 50%;
        background: #dfdfdf;
        margin-right: 0.48rem;
      }

      .text {
        display: flex;
        justify-content: space-between;
        color: #999999;
        width: calc(100%);
        line-height: 0.9rem;

        .left {
          .earnings-name {
            font-size: 0.64rem;
            color: #444444;
          }

          .origin {
            font-size: 0.48rem;
            // margin-top: 0.2rem;
          }
        }

        .right {
          text-align: right;
          .price {
            color: #f85859;
            font-size: 0.56rem;
            font-weight: bold;
          }

          .time {
            font-size: 0.48rem;
            // margin-top: 0.2rem;
          }
        }
      }
    }
  }
}
</style>
